<template>
  <div class="food-list card-item">
    <el-empty v-if="foodStore.foodRecipeList.length === 0" description="暂无美食记录"/>

    <div v-else class="list">
      <food-card v-for="(item, index) in foodStore.foodRecipeList"
                 :key="index" :food-item="item"/>
    </div>

    <el-pagination
        v-model:current-page="foodStore.pageInfo.currentPage"
        :page-size="foodStore.pageInfo.pageSize"
        layout="total, prev, pager, next"
        :total="foodStore.pageInfo.totalSize"
        @change="changePageEvent"
    />

    <el-button v-if="isLargeScreen()"
               type="primary" :icon="Plus" circle
               @click="addFoodRecipeClick" class="add-new" />
  </div>
</template>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import FoodCard from '@/components/Food/FoodCard.vue'
import { useFoodStore } from '@/store/food.ts'
import { isLargeScreen } from '@/utils'

const foodStore = useFoodStore()

const addFoodRecipeClick = () => {
  foodStore.foodRecipeApiType = 'ADD'
  foodStore.foodRecipeDialog = {
    title: '新增菜谱',
    visible: true,
    data: foodStore.getEmptyFoodRecipe()
  }
}

const changePageEvent = (value: number) => {
  foodStore.pageInfo.currentPage = value
  foodStore.queryFoodRecipeList()
}
</script>
